<template>
  <div class="pageContent">
    <!-- 选项-->
    <div class="tab-view">
      <div style="font-weight: bold">项目汇总表</div>
      <div
        :style="item.name == active ? 'border-bottom: 2px solid orange;' : ''"
        v-for="(item, index) in tabList"
        :key="index"
        @click="tabClick(item.name)"
      >
        {{ item.name }}({{ item.total }})
      </div>
    </div>
    <div v-if="active == '已创建'">
      <!-- 查询 -->
      <search-view
        ref="searchView"
        @searches="searches"
        :active="active"
        :clearText="clearText"
        @clearOver="clearOver"
        :type="'10'"
      />
      <!-- 列表 -->
      <temlist
        ref="temlist"
        :data="datas"
        :loading="loading"
        @tableRefresh="tableRefresh"
      />
      <!-- 分页器 -->
      <el-pagination
        class="pagination"
        layout="slot,prev, pager, next"
        :total="pag.total"
        :current-page="pag.pageNo"
        :page-size="pag.pageSize"
        @current-change="handleCurrentChange"
      >
        <template slot="default">
          <div>
            <span>总共{{ pag.total }}条</span>
          </div>
        </template>
      </el-pagination>
    </div>
    <div v-else-if="active == '草稿箱'">
      <search-view
        ref="searchView"
        @searches="searches"
        :active="active"
        :clearText="clearText"
        @clearOver="clearOver"
        @drafRefresh="drafRefresh"
        :type="'20'"
      />
      <draflist
        :data="drafData"
        @drafRefresh="drafRefresh"
        :drafloading="drafloading"
      />
      <!-- 分页器 -->
      <el-pagination
        class="pagination"
        layout="slot,prev, pager, next"
        :total="pag.total"
        :current-page="pag.pageNo"
        :page-size="pag.pageSize"
        @current-change="handleCurrentChange"
      >
        <template slot="default">
          <div>
            <span>总共{{ pag.total }}条</span>
          </div>
        </template>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import searchView from "./module/searchView.vue";
import temlist from "./module/temlist.vue";
//草稿
import draflist from "./module/draflist.vue";
//时间总线
import { EventBus } from "./js/events";
export default {
  components: {
    temlist,
    searchView,
    draflist,
  },
  data() {
    return {
      datas: [],
      pag: {
        total: 0,
        pageNo: 1,
        pageSize: 5,
      },
      loading: false,
      search: {},
      tabList: [
        {
          name: "已创建",
          ind: "1",
          total: 0,
        },
        {
          name: "草稿箱",
          ind: "2",
          total: 0,
        },
      ],
      active: "已创建",
      clearText: "",
      drafData: [],
      drafloading: false,
    };
  },
  created() {
    //获取总数
    this.getLength({ person: this.$store.state.user.info.name });
  },
  mounted() {
    this.getlist({ pageNo: 1, pageSize: 5 });
    //事件总线
    EventBus.$on("message", (e) => {
      this.getLength({ person: this.$store.state.user.info.name });
    });
  },
  watch: {
    active(newV) {
      if (newV == "已创建") {
        this.getlist({ pageNo: 1, pageSize: 5 });
      } else {
        this.getdraf({
          pageNo: 1,
          pageSize: 5,
          person: this.$store.state.user.info.name,
        });
      }
    },
  },
  methods: {
    searches(e) {
      this.search = e;
      let obj = {
        pageNo: this.pag.pageNo,
        pageSize: this.pag.pageSize,
      };
      obj = Object.assign(obj, e);
      //判断是已创建还是草稿箱
      if (this.active == "已创建") {
        this.getlist(obj);
      } else {
        obj.person = this.$store.state.user.info.name;
        this.getdraf(obj);
      }
    },
    async getlist(e) {
      this.loading = true;
      const data = await this.getData(e);
      data.data.forEach((ele) => {
        ele.remainDate = this.getRemainData(ele.endTime);
      });
      this.datas = data.data;
      this.pag.total = data.total;
      this.loading = false;
    },
    getData(e) {
      return new Promise((resolve, reject) => {
        this.$http.get("/getProjectlist", { params: e }).then((res) => {
          if (res.code == 200) {
            resolve(res.data);
          } else {
            reject(500);
          }
        });
      });
    },
    //统计剩余时间
    getRemainData(date2) {
      const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
      let days;
      const time1 = new Date().getTime();
      const time2 = new Date(date2).getTime(); // 第二个日期的时间戳
      if (time2 < time1) {
        days = 0;
      } else {
        const difference = Math.abs(time2 - time1); // 两个日期的差值（毫秒数）
        days = Math.floor(difference / oneDay) + 1; // 将差值转换为天数
      }
      this.dateTotal = days;
      return this.dateTotal;
    },
    //切换
    handleCurrentChange(e) {
      this.pag.pageNo = e;
      if (this.active == "已创建") {
        let obj = {
          pageNo: e,
          pageSize: this.pag.pageSize,
        };
        obj = Object.assign(obj, this.search);
        this.getlist(obj);
        return;
      }
      let obj = {
        pageNo: e,
        pageSize: this.pag.pageSize,
        person: this.$store.state.user.info.name,
      };
      obj = Object.assign(obj, this.search);
      this.getdraf(obj);
    },
    //
    tableRefresh(e) {
      if (e == true) {
        this.pag.pageNo = 1;
        this.getlist({ pageNo: this.pag.pageNo, pageSize: 5 });
      }
    },
    //切换按钮
    tabClick(e) {
      this.active = e;
      this.clearText = "clear";
      this.pag.pageNo = 1; //切换回第一页
    },
    clearOver(e) {
      if (e) {
        this.clearText = "";
      }
    },
    //获取草稿
    getdraf(e) {
      this.drafloading = true;
      this.$http.get("/getDrafProject", { params: e }).then((res) => {
        console.log(res, "res");
        if (res.code == 200) {
          res.data.data.forEach((ele) => {
            ele.remainDate = this.getRemainData(ele.endTime);
          });
          //数据不大,加载效果
          this.drafData = res.data.data;
          this.pag.total = res.data.total;
          this.drafloading = false;
        }
      });
    },
    //获取总数
    getLength(e) {
      this.$http.get("/getAboutProject", { params: e }).then((res) => {
        console.log(res, "res");
        if (res.code == 200) {
          this.tabList[0].total = res.data.data.already;
          this.tabList[1].total = res.data.data.draf;
        }
      });
    },
    //刷新
    drafRefresh(e) {
      if (e) {
        this.getdraf({
          pageNo: 1,
          pageSize: 5,
          person: this.$store.state.user.info.name,
        });
        this.getLength({ person: this.$store.state.user.info.name });
      }
    },
  },
};
</script>

<style scoped>
@import url("../../styles/pages.scss");
.pagination {
  display: flex;
}
.tab-view {
  width: 100%;
  display: flex;
}
.tab-view > div {
  margin: 28px 50px 28px 0;
  font-size: 20px;
  padding: 2px 0;
}
</style>